<template>
  <div>
    <div class="demo-input-size" style="padding: 40px">
      用户名：
      <el-input
        v-model="input"
        class="w-50 m-2"
        clearable
        placeholder="请输入"
        size="large"
        style="width: 300px"
        :suffix-icon="Search"
        @change="check()"
      />
      <el-row class="mb-4" style="float: right">
        <el-button @click="reset()">重置</el-button>
        <el-button type="primary" @click="check()">查询</el-button>
      </el-row>
    </div>
    <div class="null"></div>
    <div class="content">
      <h3>用户信息</h3>
      <p>
        <el-tooltip content="刷新" effect="dark" placement="top">
          <el-button icon="RefreshRight" @click="refresh()" />
        </el-tooltip>
        <el-tooltip content="密度" effect="dark" placement="top-start">
          <el-button icon="Expand" @click="densityHandle" />
        </el-tooltip>
        <el-tooltip content="列设置" effect="dark" placement="top-start">
          <el-button icon="Tools" />
        </el-tooltip>
      </p>

      <el-table border :data="list" style="width: 100%">
        <el-table-column :index="indexMethod" label="序号" type="index" />
        <el-table-column label="用户名" prop="userName" />
        <el-table-column label="昵称" prop="nickName" />
        <el-table-column label="头像" prop="avatar">
          <template #default="scope">
            <img alt="" class="pimg" :src="scope.row.avatar" />
          </template>
        </el-table-column>
        <el-table-column label="性别" prop="gender" />
        <el-table-column label="地址" prop="address" />
        <el-table-column label="积分" prop="score" />
        <el-table-column label="操作" prop="id" width="300%">
          <template #default="scope">
            <el-row>
              <el-button
                v-if="scope.row.isLocked === 0"
                icon="Lock"
                type="primary"
                @click="lockUser(scope.row.id)"
              />
              <el-button
                v-if="scope.row.isLocked === 1"
                icon="Unlock"
                type="primary"
                @click="unlockUser(scope.row.id)"
              />
              <el-popconfirm
                cancel-button-text="取消"
                confirm-button-text="确认"
                icon="WarningFilled"
                icon-color="orange"
                title="是否确认删除"
                @confirm="confirmEvent(scope.row.id)"
              >
                <template #reference>
                  <el-button icon="Delete" type="danger" />
                </template>
              </el-popconfirm>
              <el-button
                icon="ShoppingTrolley"
                @click="dialogTableVisible = true"
              />
              <el-button icon="PieChart" @click="dialogTableVisible2 = true" />
              <el-button
                icon="Edit"
                @click="
                  ;(id = scope.row.id),
                    (dialogFormVisible = true),
                    (nickName = scope.row.nickName),
                    (birthday = scope.row.birthday),
                    (age = scope.row.age),
                    (avatar = scope.row.avatar),
                    (area = scope.row.area),
                    (gender = scope.row.gender),
                    (address = scope.row.address)
                "
              />
            </el-row>
          </template>
        </el-table-column>
      </el-table>

      <!-- 购物车弹窗 -->
      <el-dialog v-model="dialogTableVisible" title="购物车">
        <el-table :data="gridData">
          <el-table-column label="序号" property="index" />
          <el-table-column label="名字" property="name" />
          <el-table-column label="价格" property="price" />
          <el-table-column label="数量" property="num" />
        </el-table>
      </el-dialog>

      <!-- 积分弹窗 -->
      <el-dialog v-model="dialogTableVisible2" title="用户积分">
        <el-table :data="gridData">
          <el-table-column label="序号" property="index" />
          <el-table-column label="备注" property="remark" />
          <el-table-column label="时间" property="time" />
        </el-table>
      </el-dialog>

      <!-- 修改弹窗 -->
      <el-dialog v-model="dialogFormVisible" center title="修改个人信息">
        <el-form :model="form">
          <el-form-item label="昵称" :label-width="formLabelWidth">
            <el-input v-model="nickName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="生日" :label-width="formLabelWidth">
            <el-input v-model="birthday" autocomplete="off" />
          </el-form-item>
          <el-form-item label="年龄" :label-width="formLabelWidth">
            <el-input v-model="age" autocomplete="off" />
          </el-form-item>
          <el-form-item label="头像" :label-width="formLabelWidth">
            <el-input v-model="avatar" autocomplete="off" />
          </el-form-item>
          <el-form-item label="楼栋地址" :label-width="formLabelWidth">
            <el-input v-model="area" autocomplete="off" />
          </el-form-item>
          <el-form-item label="详细地址门牌信息" :label-width="formLabelWidth">
            <el-input v-model="address" autocomplete="off" />
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-input v-model="gender" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button
              type="primary"
              @click=";(dialogFormVisible = false), getUpdate(id)"
            >
              确认
            </el-button>
          </span>
        </template>
      </el-dialog>

      <el-pagination
        background
        class="mt-4"
        :current-page="currentPage"
        layout="prev, pager, next"
        small
        :total="total"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup>
  import {
    getPersonList,
    getuserName,
    getDeleteUser,
    getUpdateUser,
    getLock,
    getPage,
  } from '~/src/myApi'
  import { ref, reactive } from 'vue'
  import { location } from 'vue-router'

  const refresh = () => {
    window.location.reload()
  }
  const indexMethod = (index) => {
    return index + 1
  }
  const list = ref([])
  const input = ref('')
  const dialogTableVisible = ref(false)
  const dialogTableVisible2 = ref(false)
  const dialogFormVisible = ref(false)

  const formLabelWidth = '140px'
  const id = ref()
  const nickName = ref('')
  const birthday = ref()
  const age = ref()
  const avatar = ref()
  const area = ref('')
  const address = ref('')
  const gender = ref('')

  // 修改个人信息
  const getUpdate = async (id) => {
    const updatedUser = {
      nickName: nickName.value,
      birthday: birthday.value,
      age: age.value,
      avatar: avatar.value,
      area: area.value,
      address: address.value,
      gender: gender.value,
    }

    const r = await getUpdateUser(id, updatedUser)
    console.log(r)
    getlist()
  }

  // 锁定用户
  const lockUser = async (id) => {
    const r = await getLock(id, 1)
    if (r.data.code === 1) {
      // 锁定成功，更新用户列表中对应用户的锁定状态
      list.value = list.value.map((item) => {
        if (item.id === id) {
          item.isLocked = 1
        }
        return item
      })
    }
    getlist()
  }
  // 解锁用户
  const unlockUser = async (id) => {
    const r = await getLock(id, 0)
    if (r.data.code === 1) {
      // 解锁成功，更新用户列表中对应用户的锁定状态
      list.value = list.value.map((item) => {
        if (item.id === id) {
          item.isLocked = 0
        }
        return item
      })
    }
    getlist()
  }

  // 重置
  const reset = () => {
    getlist()
    input.value = ''
  }
  // 删除
  const confirmEvent = async (id) => {
    const r = await getDeleteUser(id)
    getlist()
  }

  // 查询
  const check = async () => {
    const word = input.value
    // console.log(word)
    const r = await getuserName(word)
    // console.log(r.data.data)
    list.value = r.data.data
  }

  // 列表
  const getlist = async () => {
    const r = await getPersonList()
    // console.log(r.data.data)
    list.value = r.data.data
    console.log(r.data.total)
    total.value = r.data.total
    // currentPage.value = r.data.pages
  }
  getlist()

  // 页面数据
  const total = ref(0)
  // let pageSize = ref(10)
  const currentPage = ref(1)
  // 监听页码变化
  const handlePageChange = async (page) => {
    currentPage.value = page
    console.log(page)
    const r = await getPage(page)
    console.log(r)
    list.value = r.data.data
  }
</script>
<style scoped>
  .null {
    height: 30px;
    background-color: #f7f8fa;
  }
  .content {
    padding: 0 30px;
  }
  .pimg {
    width: 80px;
    height: 80px;
  }
  .content h3 {
    display: inline-block;
  }
  .content p {
    display: inline-block;
  }
  .el-select {
    width: 300px;
  }
  .el-input {
    width: 300px;
  }
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
</style>
